import { Button, Form } from 'antd';
import { useState } from 'react';
import { YmTable, YmTablePorps } from 'ym-design';

// 表格字段类型
type TableRecord = {
  name: string;
  age: number;
  gender: '男' | '女';
  email: string;
  address: string;
  create_time: string;
  guid: string;
};
// 查询字段类型
type SearchValue = {
  name: string;
  gender: string;
  email: string;
  address: string;
};

const mockData = new Array(100).fill(1).map<TableRecord>((v, index) => {
  return {
    name: `用户${index}`,
    age: Math.floor(Math.random() * 100),
    gender: Math.random() > 0.6 ? '女' : '男',
    email: Math.random() + '@abc.com',
    address: `地址${index}`,
    create_time: '随机时间',
    guid: `dasklfjaf${index}`,
  };
});

const DEFAULTCOLUMS: YmTablePorps<TableRecord, SearchValue>['columns'] = [
  {
    dataIndex: 'name',
    title: '姓名',
    key: 'name',
    fixed: 'left',
    width: 80,
  },
  {
    dataIndex: 'age',
    title: '年龄',
    key: 'age',
    width: 100,
  },
  {
    dataIndex: 'gender',
    title: '性别',
    key: 'gender',
    width: 80,
  },
  {
    dataIndex: 'email',
    title: '邮箱',
    key: 'email',
    width: 300,
  },
  {
    dataIndex: 'address',
    title: '地址',
    key: 'address',
    width: 300,
  },
  {
    dataIndex: 'create_time',
    title: '创建时间',
    key: 'create_time',
    width: 300,
  },
  {
    key: '_operate',
    title: '操作', //操作列key 必须设置为'_operate'
  },
];

export default function () {
  const [form] = Form.useForm();

  const [columns, setColumns] =
    useState<YmTablePorps<TableRecord, SearchValue>['columns']>(DEFAULTCOLUMS);

  //列显示回调函数
  const handleColumnsChage = (newColumns: any[], type: any) => {
    if (type.type !== 'reset') {
      console.log('--columnSetting--newColumns--type--:', newColumns, type);
      setColumns(newColumns);
    } else {
      console.log(
        '--columnSetting--newColumns--type--reset--:',
        newColumns,
        type,
      );
      setColumns(DEFAULTCOLUMS);
    }
  };

  return (
    <div style={{ height: '500px' }}>
      <YmTable<TableRecord, SearchValue>
        columns={columns}
        rowKey="guid"
        searchForm={{
          formItems: [
            {
              name: 'name',
              label: '名称',
              valueType: {
                type: 'input',
              },
            },
            {
              name: 'gender',
              label: '性别',
              valueType: {
                type: 'select',
                selectProps: {
                  options: [
                    {
                      label: '男',
                      value: '男',
                    },
                    {
                      label: '女',
                      value: '女',
                    },
                  ],
                },
              },
            },
            {
              name: 'email',
              label: '邮箱',
              valueType: {
                type: 'input',
              },
            },
            {
              name: 'address',
              label: '地址',
              valueType: {
                type: 'input',
              },
            },
          ],
          form,
        }}
        request={async (table, searchValue) => {
          const { pageIndex = 1, pageSize = 10 } = table.page ?? {};

          await new Promise((resolve) => {
            setTimeout(() => resolve(null), 1000);
          });

          const start = (pageIndex - 1) * pageSize;
          const end = start + pageSize;

          let result = mockData
            .filter((v) => {
              return (
                v.name.includes(searchValue?.name ?? '') &&
                v.gender.includes(searchValue?.gender ?? '')
              );
            })
            .map((v) => ({ ...v }));

          return {
            list: result.slice(start, end),
            total: result.length,
          };
        }}
        operate={[
          {
            text: '重命名',
            key: 'rename',
            onClick(record, index) {},
            hidden(record, index) {
              return index === 0;
            },
          },
          {
            text: '删除',
            key: 'del',
            onClick(record, index) {},
            disabled(record, index) {
              return index === 0;
            },
          },
        ]}
        toolBar={{
          prefixNode: (
            <>
              <Button
                onClick={() => {
                  const formValues = form.getFieldsValue();
                  console.log('--formValues--:', formValues);
                }}
              >
                获取搜索表单值
              </Button>
            </>
          ),
          onColumnsChange: handleColumnsChage,
        }}
        requestOptions={{
          defaultPageSize: 20,
        }}
      />
    </div>
  );
}
